<!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="utf-8">
        <title>Web-Splat - Demo Scenes</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro" rel="stylesheet">

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/fontawesome.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js"></script>
        <script src=" https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.24/dist/js/bulma-carousel.min.js "></script>


        <link rel="stylesheet" href="static/css/style.css">
    </head>

    <body>
        <section class="section">
            <div class="container is-max-desktop is-mobile">
                <div class="column">
                    <h1 class="title is-3">Web-Splat - Demo Scenes</h1>
                    <p class="subtitle is-5">Scenes compressed with <a href="https://keksboter.github.io/c3dgs">Compressed 3D Gaussian Splatting for Accelerated Novel View Synthesis</a></p>
                </div>
                <div class="column" style="margin-bottom: 1rem;">
    <a href="https://jonbarron.info/mipnerf360/"><h2 class="title is-3 is-link" style="color:var(--link)">Mip-NeRF360</h2></a>
</div>
<div class="columns is-multiline"><div class="column demo-card">
    <div class="card">
        <a target="_blank"
            href="https://keksboter.github.io/web-splat?file=./scenes/bicycle/point_cloud/iteration_35000/point_cloud.npz&scene=./scenes/bicycle/cameras.json">
            <div class="card-image">
                <figure class="image">
                    <img src="./static/img/examples/bicycle.jpg" alt="Bicycle Preview Image">
                </figure>
            </div>
            <div class="card-content has-text-left">
                <div class="media">
                    <div class="media-left">
                        <div class="title is-4">Bicycle</div>
                        <div class="subtitle is-6">Mip-NeRF360</div>
                    </div>
                    <div class="media-center" style="width: 100%;">
                    </div>
                    <div class="media-right">
                        <span class="tag">
                            47.1MB
                        </span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="column demo-card">
    <div class="card">
        <a target="_blank"
            href="https://keksboter.github.io/web-splat?file=./scenes/bonsai/point_cloud/iteration_35000/point_cloud.npz&scene=./scenes/bonsai/cameras.json">
            <div class="card-image">
                <figure class="image">
                    <img src="./static/img/examples/bonsai.jpg" alt="Bonsai Preview Image">
                </figure>
            </div>
            <div class="card-content has-text-left">
                <div class="media">
                    <div class="media-left">
                        <div class="title is-4">Bonsai</div>
                        <div class="subtitle is-6">Mip-NeRF360</div>
                    </div>
                    <div class="media-center" style="width: 100%;">
                    </div>
                    <div class="media-right">
                        <span class="tag">
                            12.8MB
                        </span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="column demo-card">
    <div class="card">
        <a target="_blank"
            href="https://keksboter.github.io/web-splat?file=./scenes/counter/point_cloud/iteration_35000/point_cloud.npz&scene=./scenes/counter/cameras.json">
            <div class="card-image">
                <figure class="image">
                    <img src="./static/img/examples/counter.jpg" alt="Counter Preview Image">
                </figure>
            </div>
            <div class="card-content has-text-left">
                <div class="media">
                    <div class="media-left">
                        <div class="title is-4">Counter</div>
                        <div class="subtitle is-6">Mip-NeRF360</div>
                    </div>
                    <div class="media-center" style="width: 100%;">
                    </div>
                    <div class="media-right">
                        <span class="tag">
                            13.8MB
                        </span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="column demo-card">
    <div class="card">
        <a target="_blank"
            href="https://keksboter.github.io/web-splat?file=./scenes/flowers/point_cloud/iteration_35000/point_cloud.npz&scene=./scenes/flowers/cameras.json">
            <div class="card-image">
                <figure class="image">
                    <img src="./static/img/examples/flowers.jpg" alt="Flowers Preview Image">
                </figure>
            </div>
            <div class="card-content has-text-left">
                <div class="media">
                    <div class="media-left">
                        <div class="title is-4">Flowers</div>
                        <div class="subtitle is-6">Mip-NeRF360</div>
                    </div>
                    <div class="media-center" style="width: 100%;">
                    </div>
                    <div class="media-right">
                        <span class="tag">
                            31.1MB
                        </span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="column demo-card">
    <div class="card">
        <a target="_blank"
            href="https://keksboter.github.io/web-splat?file=./scenes/garden/point_cloud/iteration_35000/point_cloud.npz&scene=./scenes/garden/cameras.json">
            <div class="card-image">
                <figure class="image">
                    <img src="./static/img/examples/garden.jpg" alt="Garden Preview Image">
                </figure>
            </div>
            <div class="card-content has-text-left">
                <div class="media">
                    <div class="media-left">
                        <div class="title is-4">Garden</div>
                        <div class="subtitle is-6">Mip-NeRF360</div>
                    </div>
                    <div class="media-center" style="width: 100%;">
                    </div>
                    <div class="media-right">
                        <span class="tag">
                            46.6MB
                        </span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="column demo-card">
    <div class="card">
        <a target="_blank"
            href="https://keksboter.github.io/web-splat?file=./scenes/kitchen/point_cloud/iteration_35000/point_cloud.npz&scene=./scenes/kitchen/cameras.json">
            <div class="card-image">
                <figure class="image">
                    <img src="./static/img/examples/kitchen.jpg" alt="Kitchen Preview Image">
                </figure>
            </div>
            <div class="card-content has-text-left">
                <div class="media">
                    <div class="media-left">
                        <div class="title is-4">Kitchen</div>
                        <div class="subtitle is-6">Mip-NeRF360</div>
                    </div>
                    <div class="media-center" style="width: 100%;">
                    </div>
                    <div class="media-right">
                        <span class="tag">
                            18.9MB
                        </span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="column demo-card">
    <div class="card">
        <a target="_blank"
            href="https://keksboter.github.io/web-splat?file=./scenes/room/point_cloud/iteration_35000/point_cloud.npz&scene=./scenes/room/cameras.json">
            <div class="card-image">
                <figure class="image">
                    <img src="./static/img/examples/room.jpg" alt="Room Preview Image">
                </figure>
            </div>
            <div class="card-content has-text-left">
                <div class="media">
                    <div class="media-left">
                        <div class="title is-4">Room</div>
                        <div class="subtitle is-6">Mip-NeRF360</div>
                    </div>
                    <div class="media-center" style="width: 100%;">
                    </div>
                    <div class="media-right">
                        <span class="tag">
                            15.0MB
                        </span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="column demo-card">
    <div class="card">
        <a target="_blank"
            href="https://keksboter.github.io/web-splat?file=./scenes/stump/point_cloud/iteration_35000/point_cloud.npz&scene=./scenes/stump/cameras.json">
            <div class="card-image">
                <figure class="image">
                    <img src="./static/img/examples/stump.jpg" alt="Stump Preview Image">
                </figure>
            </div>
            <div class="card-content has-text-left">
                <div class="media">
                    <div class="media-left">
                        <div class="title is-4">Stump</div>
                        <div class="subtitle is-6">Mip-NeRF360</div>
                    </div>
                    <div class="media-center" style="width: 100%;">
                    </div>
                    <div class="media-right">
                        <span class="tag">
                            40.6MB
                        </span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="column demo-card">
    <div class="card">
        <a target="_blank"
            href="https://keksboter.github.io/web-splat?file=./scenes/treehill/point_cloud/iteration_35000/point_cloud.npz&scene=./scenes/treehill/cameras.json">
            <div class="card-image">
                <figure class="image">
                    <img src="./static/img/examples/treehill.jpg" alt="Treehill Preview Image">
                </figure>
            </div>
            <div class="card-content has-text-left">
                <div class="media">
                    <div class="media-left">
                        <div class="title is-4">Treehill</div>
                        <div class="subtitle is-6">Mip-NeRF360</div>
                    </div>
                    <div class="media-center" style="width: 100%;">
                    </div>
                    <div class="media-right">
                        <span class="tag">
                            33.3MB
                        </span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
</div><div class="column" style="margin-bottom: 1rem;">
    <a href="https://www.tanksandtemples.org/"><h2 class="title is-3 is-link" style="color:var(--link)">Tanks & Temples</h2></a>
</div>
<div class="columns is-multiline"><div class="column demo-card">
    <div class="card">
        <a target="_blank"
            href="https://keksboter.github.io/web-splat?file=./scenes/train/point_cloud/iteration_35000/point_cloud.npz&scene=./scenes/train/cameras.json">
            <div class="card-image">
                <figure class="image">
                    <img src="./static/img/examples/train.jpg" alt="Train Preview Image">
                </figure>
            </div>
            <div class="card-content has-text-left">
                <div class="media">
                    <div class="media-left">
                        <div class="title is-4">Train</div>
                        <div class="subtitle is-6">Tanks & Temples</div>
                    </div>
                    <div class="media-center" style="width: 100%;">
                    </div>
                    <div class="media-right">
                        <span class="tag">
                            13.2MB
                        </span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="column demo-card">
    <div class="card">
        <a target="_blank"
            href="https://keksboter.github.io/web-splat?file=./scenes/truck/point_cloud/iteration_35000/point_cloud.npz&scene=./scenes/truck/cameras.json">
            <div class="card-image">
                <figure class="image">
                    <img src="./static/img/examples/truck.jpg" alt="Truck Preview Image">
                </figure>
            </div>
            <div class="card-content has-text-left">
                <div class="media">
                    <div class="media-left">
                        <div class="title is-4">Truck</div>
                        <div class="subtitle is-6">Tanks & Temples</div>
                    </div>
                    <div class="media-center" style="width: 100%;">
                    </div>
                    <div class="media-right">
                        <span class="tag">
                            21.3MB
                        </span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
</div><div class="column" style="margin-bottom: 1rem;">
    <a href="http://visual.cs.ucl.ac.uk/pubs/deepblending/datasets.html"><h2 class="title is-3 is-link" style="color:var(--link)">Deep Blending</h2></a>
</div>
<div class="columns is-multiline"><div class="column demo-card">
    <div class="card">
        <a target="_blank"
            href="https://keksboter.github.io/web-splat?file=./scenes/drjohnson/point_cloud/iteration_35000/point_cloud.npz&scene=./scenes/drjohnson/cameras.json">
            <div class="card-image">
                <figure class="image">
                    <img src="./static/img/examples/drjohnson.jpg" alt="Drjohnson Preview Image">
                </figure>
            </div>
            <div class="card-content has-text-left">
                <div class="media">
                    <div class="media-left">
                        <div class="title is-4">Drjohnson</div>
                        <div class="subtitle is-6">Deep Blending</div>
                    </div>
                    <div class="media-center" style="width: 100%;">
                    </div>
                    <div class="media-right">
                        <span class="tag">
                            28.9MB
                        </span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="column demo-card">
    <div class="card">
        <a target="_blank"
            href="https://keksboter.github.io/web-splat?file=./scenes/playroom/point_cloud/iteration_35000/point_cloud.npz&scene=./scenes/playroom/cameras.json">
            <div class="card-image">
                <figure class="image">
                    <img src="./static/img/examples/playroom.jpg" alt="Playroom Preview Image">
                </figure>
            </div>
            <div class="card-content has-text-left">
                <div class="media">
                    <div class="media-left">
                        <div class="title is-4">Playroom</div>
                        <div class="subtitle is-6">Deep Blending</div>
                    </div>
                    <div class="media-center" style="width: 100%;">
                    </div>
                    <div class="media-right">
                        <span class="tag">
                            21.7MB
                        </span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
</div><div class="column" style="margin-bottom: 1rem;">
    <a href="https://www.matthewtancik.com/nerf"><h2 class="title is-3 is-link" style="color:var(--link)">Synthetic-NeRF</h2></a>
</div>
<div class="columns is-multiline"><div class="column demo-card">
    <div class="card">
        <a target="_blank"
            href="https://keksboter.github.io/web-splat?file=./scenes/chair/point_cloud/iteration_35000/point_cloud.npz&scene=./scenes/chair/cameras.json">
            <div class="card-image">
                <figure class="image">
                    <img src="./static/img/examples/chair.jpg" alt="Chair Preview Image">
                </figure>
            </div>
            <div class="card-content has-text-left">
                <div class="media">
                    <div class="media-left">
                        <div class="title is-4">Chair</div>
                        <div class="subtitle is-6">Synthetic-NeRF</div>
                    </div>
                    <div class="media-center" style="width: 100%;">
                    </div>
                    <div class="media-right">
                        <span class="tag">
                            3.6MB
                        </span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="column demo-card">
    <div class="card">
        <a target="_blank"
            href="https://keksboter.github.io/web-splat?file=./scenes/drums/point_cloud/iteration_35000/point_cloud.npz&scene=./scenes/drums/cameras.json">
            <div class="card-image">
                <figure class="image">
                    <img src="./static/img/examples/drums.jpg" alt="Drums Preview Image">
                </figure>
            </div>
            <div class="card-content has-text-left">
                <div class="media">
                    <div class="media-left">
                        <div class="title is-4">Drums</div>
                        <div class="subtitle is-6">Synthetic-NeRF</div>
                    </div>
                    <div class="media-center" style="width: 100%;">
                    </div>
                    <div class="media-right">
                        <span class="tag">
                            3.8MB
                        </span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="column demo-card">
    <div class="card">
        <a target="_blank"
            href="https://keksboter.github.io/web-splat?file=./scenes/ficus/point_cloud/iteration_35000/point_cloud.npz&scene=./scenes/ficus/cameras.json">
            <div class="card-image">
                <figure class="image">
                    <img src="./static/img/examples/ficus.jpg" alt="Ficus Preview Image">
                </figure>
            </div>
            <div class="card-content has-text-left">
                <div class="media">
                    <div class="media-left">
                        <div class="title is-4">Ficus</div>
                        <div class="subtitle is-6">Synthetic-NeRF</div>
                    </div>
                    <div class="media-center" style="width: 100%;">
                    </div>
                    <div class="media-right">
                        <span class="tag">
                            3.1MB
                        </span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="column demo-card">
    <div class="card">
        <a target="_blank"
            href="https://keksboter.github.io/web-splat?file=./scenes/hotdog/point_cloud/iteration_35000/point_cloud.npz&scene=./scenes/hotdog/cameras.json">
            <div class="card-image">
                <figure class="image">
                    <img src="./static/img/examples/hotdog.jpg" alt="Hotdog Preview Image">
                </figure>
            </div>
            <div class="card-content has-text-left">
                <div class="media">
                    <div class="media-left">
                        <div class="title is-4">Hotdog</div>
                        <div class="subtitle is-6">Synthetic-NeRF</div>
                    </div>
                    <div class="media-center" style="width: 100%;">
                    </div>
                    <div class="media-right">
                        <span class="tag">
                            2.7MB
                        </span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="column demo-card">
    <div class="card">
        <a target="_blank"
            href="https://keksboter.github.io/web-splat?file=./scenes/lego/point_cloud/iteration_35000/point_cloud.npz&scene=./scenes/lego/cameras.json">
            <div class="card-image">
                <figure class="image">
                    <img src="./static/img/examples/lego.jpg" alt="Lego Preview Image">
                </figure>
            </div>
            <div class="card-content has-text-left">
                <div class="media">
                    <div class="media-left">
                        <div class="title is-4">Lego</div>
                        <div class="subtitle is-6">Synthetic-NeRF</div>
                    </div>
                    <div class="media-center" style="width: 100%;">
                    </div>
                    <div class="media-right">
                        <span class="tag">
                            4.3MB
                        </span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="column demo-card">
    <div class="card">
        <a target="_blank"
            href="https://keksboter.github.io/web-splat?file=./scenes/materials/point_cloud/iteration_35000/point_cloud.npz&scene=./scenes/materials/cameras.json">
            <div class="card-image">
                <figure class="image">
                    <img src="./static/img/examples/materials.jpg" alt="Materials Preview Image">
                </figure>
            </div>
            <div class="card-content has-text-left">
                <div class="media">
                    <div class="media-left">
                        <div class="title is-4">Materials</div>
                        <div class="subtitle is-6">Synthetic-NeRF</div>
                    </div>
                    <div class="media-center" style="width: 100%;">
                    </div>
                    <div class="media-right">
                        <span class="tag">
                            4.0MB
                        </span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="column demo-card">
    <div class="card">
        <a target="_blank"
            href="https://keksboter.github.io/web-splat?file=./scenes/mic/point_cloud/iteration_35000/point_cloud.npz&scene=./scenes/mic/cameras.json">
            <div class="card-image">
                <figure class="image">
                    <img src="./static/img/examples/mic.jpg" alt="Mic Preview Image">
                </figure>
            </div>
            <div class="card-content has-text-left">
                <div class="media">
                    <div class="media-left">
                        <div class="title is-4">Mic</div>
                        <div class="subtitle is-6">Synthetic-NeRF</div>
                    </div>
                    <div class="media-center" style="width: 100%;">
                    </div>
                    <div class="media-right">
                        <span class="tag">
                            3.0MB
                        </span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="column demo-card">
    <div class="card">
        <a target="_blank"
            href="https://keksboter.github.io/web-splat?file=./scenes/ship/point_cloud/iteration_35000/point_cloud.npz&scene=./scenes/ship/cameras.json">
            <div class="card-image">
                <figure class="image">
                    <img src="./static/img/examples/ship.jpg" alt="Ship Preview Image">
                </figure>
            </div>
            <div class="card-content has-text-left">
                <div class="media">
                    <div class="media-left">
                        <div class="title is-4">Ship</div>
                        <div class="subtitle is-6">Synthetic-NeRF</div>
                    </div>
                    <div class="media-center" style="width: 100%;">
                    </div>
                    <div class="media-right">
                        <span class="tag">
                            4.9MB
                        </span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
</div>
            </div>
        </section>
    </body>

    </html>
